<template>
	<div>
		<!--下拉选择-->
		<el-select 
			ref="select"
		  style="width:160px;"
			v-model="value" 
			:disabled="!!disabled"
			:placeholder="placeholder" 
			:filterable="filteRable"
			@change="changeHandel">
	    <el-option
	      v-for="(item,index) in options"
	      :key="index"
	      :label="item.label"
	      :value="item.value">
	    </el-option>
	  </el-select>
	</div>
</template>

<script>
	export default {
		props : [
			"defaultValue",
			"placeholder" ,
			"optionList",
			"filterable",
			"autoSelect",
			"disabled",
		],
		mounted(){
			this.init();
		},
//		watch:{
//    optionList(val){
//				if(val){
//					this.options = val;
//					if(this.autoSelect){
//						this.value = this.defaultValue || (val[0]&&val[0].value ? val[0].value:'');
//					}else{
//						this.value = this.defaultValue || ""
//					}
//				}
//			}
//				value(n,o){
//					this.value2 = n ;
//				}
//		},
		computed:{
//			value: {
//	      get: function () {
//	      	
//	      },
//	      set: function (v) {
//	        // this.a = v - 1
//	      }
//	    }
		},
		watch:{
			defaultValue(){
				this.getAutoValue();
			},
			optionList(){
				this.options = this.optionList;
				this.getAutoValue();
			},
		},
		data(){
			return {
				value : "",
				options: [],
				holder : "",
				filteRable : false,
			}
		},
		methods : {
			getAutoValue(){
				const val = this.options ;
      	if(this.autoSelect){
					this.value =  this.defaultValue || (val[0]&&val[0].value ? val[0].value:'');
				}else{
					this.value =  this.defaultValue || ""
				}
				this.changeHandel(this.value)
			},
			init(){
				this.filteRable = this.filterable ;
				if(this.optionList){
					this.options = this.optionList;
				}
			},
			changeHandel(v){
				let selectedArr = []
				if(typeof(v)=="string"||typeof(v)=="number"){
					// 单选
					for(let i in this.options){
						if(this.options[i].value==v||this.options[i].label==v){
							selectedArr.push(this.options[i])
						}
					}
				}else{ 
					// 多选
					for(let value in v){
						for(let i in this.options){
							if(this.options[i].value==value){
								selectedArr.push(this.options[i])
							}
						}
					}
				}
				this.$emit("change", "select", v , selectedArr)
			},
			reset(){
				this.value = this.defaultValue || "";
				this.changeHandel(this.value);
			},
			
			asyncUpdateOption(options,config){
				this.options = options;
				if(this.autoSelect||(config&&config.defaultSelect)){
					this.value = this.defaultValue || (options[0]&&options[0].value ? options[0].value:'') ;
					this.changeHandel(this.value)
				}else{
					this.reset();
				}
			}
		}
	}
	
</script>

<style>
</style>